<template>
    <div class="billDetail">
        <div class="navHead">
            <van-nav-bar
                    :border="false"
                    title="账单详情"
                    left-arrow
                    @click-left="$navBack('prePath')">
            </van-nav-bar>
        </div>
        <div class="text-center-pk bg-white-pk font-size-14-pk billHeader page-pad-pk">
            <div class="light-border-bottom-pk pad-btom-bill">
                <div>
                    <pk-img
                            :src="billInfo.picture"
                            round
                            width="39px"
                            height="39px">
                    </pk-img>
                </div>
                <div class="text-light-pk">
                    {{billInfo.title}}
                </div>
                <div v-if="billInfo.logType==='0'" class="text-red-pk money">
                    {{logFmt(billInfo.logType)}}{{billInfo.money}}
                </div>
                <div v-if="billInfo.logType==='1'" class="text-black-pk money">
                    {{logFmt(billInfo.logType)}}{{billInfo.money}}
                </div>
            </div>
        </div>
        <div class="bg-white-pk page-pad-pk ">
            <div class="billInfo pad-btom-bill">
                <div class=" pad-topBtom-item">
                    <div class="light-border-bottom-pk pad-topBtom-item">
                        <div class="text-light-pk">商品说明</div>
                        <div class="itemRight">{{billInfo.remark}}</div>
                    </div>
                    <div v-if="billInfo.isOrder==='1'" class="orderDetail">
                        查看订单详情
                    </div>
                    <div class="light-border-bottom-pk pad-topBtom-item">
                        <div class="text-light-pk">当前状态</div>
                        <div class="itemRight">{{billInfo.statusName}}</div>
                    </div>
                    <div class="light-border-bottom-pk pad-topBtom-item">
                        <div class="text-light-pk">支付方式</div>
                        <div class="itemRight">{{payFmt(billInfo.payType)}}</div>
                    </div>
                    <!--<div class="light-border-bottom-pk pad-topBtom-item">
                        <div class="text-light-pk">退款方式</div>
                        <div class="itemRight">支付宝</div>
                    </div>-->
                    <div class="light-border-bottom-pk pad-topBtom-item">
                        <div class="text-light-pk">创建时间</div>
                        <div class="itemRight">{{billInfo.createTime}}</div>
                    </div>
                    <div class="light-border-bottom-pk pad-topBtom-item">
                        <div class="text-light-pk">交易单号</div>
                        <div class="itemRight">{{billInfo.id}}</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    import PkImg from "../../components/PkImg";
    export default {
        name:"",
        components:{
            PkImg
        },
        data(){
            return{
                value:this.$route.params.queryStr,
                billInfo:{},
                isOrder:"",
                logType:"",
            }
        },

        created() {
            if(this.value) {
                this.billInfo = JSON.parse(decodeURI(this.value))
            }

        },
        methods:{
            //收入支付
            logFmt(logType){
                return logType == "0" ? "+" : "-"

            },
            payFmt(payType){

               /* 支付类型 1支付宝支付 2微信支付 3余额支付 4银联支付*/
                let payArr=[
                    {value:"1",name:"支付宝支付"},
                    {value:"2",name:"微信支付"},
                    {value:"3",name:"余额支付"},
                    {value:"4",name:"银联支付"}
                ];
                return this.$util.dictTranslate(payArr,payType)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .billDetail{
        line-height: 2;
        .pad-topBtom-item{
            padding: 5px 0;
        }
        .pad-btom-bill{
            padding-bottom: 15px;
        }
        .navHead{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 999;
        }
        .billHeader{
            padding-top: 65px;
            .money{
                font-size: 30px;
            }
        }
        .billInfo{
            .itemLeft{
                color: #999999;
            }
            .itemRight{
                word-break: break-all;
                margin: -27px 0 0 90px;
            }
            .itemRight:empty::before {
                content: "-";
                color: #1A1A1A;
            }
            .orderDetail{
                text-align: right;
                color: #10A2ED;
               padding-top: 10px;
            }
        }
    }
</style>
